<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no,email=no,adress=no"><meta name="theme-color" content="#000000"><meta http-equiv="window-target" content="_top"><title>Blog</title><meta name="description" content="1、安装 2、创建 3、初始化 4、运行   知识点：  1. 目录结构分析 2. 创建组件 3. JSX注意事项 4.绑定数据或对象   知识点：  事件绑定： 数据绑定（View-&gt;Model） 数据绑定（Model-&gt;View） 双向数据绑定（M-&gt;V&amp;V-&gt;M 俗称MVVM）   知识点：  1. 跨域问题 2. axios 安装 引入 基本使用： 动"><meta property="og:type" content="article"><meta property="og:title" content="Zhong&#39;s blog"><meta property="og:url" content="http://xiaozhong233.gitee.io/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/index.html"><meta property="og:site_name" content="Zhong&#39;s blog"><meta property="og:description" content="1、安装 2、创建 3、初始化 4、运行   知识点：  1. 目录结构分析 2. 创建组件 3. JSX注意事项 4.绑定数据或对象   知识点：  事件绑定： 数据绑定（View-&gt;Model） 数据绑定（Model-&gt;View） 双向数据绑定（M-&gt;V&amp;V-&gt;M 俗称MVVM）   知识点：  1. 跨域问题 2. axios 安装 引入 基本使用： 动"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730214602873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730220200692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730222041705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><meta property="og:image" content="https://img-blog.csdnimg.cn/201907302232508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730230508379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730225043213.png"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730225319224.png"><meta property="og:image" content="https://img-blog.csdnimg.cn/20190730230439418.png"><meta property="article:published_time" content="2020-11-19T02:31:19.165Z"><meta property="article:modified_time" content="2020-11-19T02:31:26.706Z"><meta property="article:author" content="钟浩伟"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://img-blog.csdnimg.cn/20190730214602873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70"><link rel="canonical" href="http://xiaozhong233.gitee.io/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/index.html"><link rel="alternate" href="/atom.xml" title="Zhong&#39;s blog" type="application/atom+xml"><link rel="icon" href="/favicon.png" type="image/x-icon"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css"><meta name="generator" content="Hexo 5.2.0"></head><body class="main-center" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="slimContent"><div class="navbar-header"><div class="profile-block text-center"><a id="avatar" href="https://github.com/XiaoZhong233" target="_blank"><img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200"></a><h2 id="name" class="hidden-xs hidden-sm">钟</h2><h3 id="title" class="hidden-xs hidden-sm hidden-md">苦逼学生仔 &amp; 未来搬砖大师</h3><small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> GuangZhou, China</small></div><div class="search" id="search-form-wrap"><form class="search-form sidebar-form"><div class="input-group"><input type="text" class="search-form-input form-control" placeholder="搜索"> <span class="input-group-btn"><button type="submit" class="search-form-submit btn btn-flat" onclick="return!1"><i class="icon icon-search"></i></button></span></div></form><div class="ins-search"><div class="ins-search-mask"></div><div class="ins-search-container"><div class="ins-input-wrapper"><input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech> <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="ins-section-wrapper"><div class="ins-section-container"></div></div></div></div></div><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button></div><nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation"><ul class="nav navbar-nav main-nav"><li class="menu-item menu-item-home"><a href="/."><i class="icon icon-home-fill"></i> <span class="menu-title">首页</span></a></li><li class="menu-item menu-item-archives"><a href="/archives"><i class="icon icon-archives-fill"></i> <span class="menu-title">归档</span></a></li><li class="menu-item menu-item-categories"><a href="/categories"><i class="icon icon-folder"></i> <span class="menu-title">分类</span></a></li><li class="menu-item menu-item-tags"><a href="/tags"><i class="icon icon-tags"></i> <span class="menu-title">标签</span></a></li><li class="menu-item menu-item-repository"><a href="/repository"><i class="icon icon-project"></i> <span class="menu-title">项目</span></a></li><li class="menu-item menu-item-about"><a href="/about"><i class="icon icon-cup-fill"></i> <span class="menu-title">关于</span></a></li></ul><ul class="social-links"><li><a href="https://github.com/XiaoZhong233" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top"><i class="icon icon-rss"></i></a></li></ul></nav></div></header><aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar"><div class="slimContent"><div class="widget"><h3 class="widget-title">公告</h3><div class="widget-body"><div id="board"><div class="content"><p>欢迎交流与分享经验!</p></div></div></div></div><div class="widget"><h3 class="widget-title">分类</h3><div class="widget-body"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Python/">Python</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF/">后端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%90%86%E8%AE%BA/">计算机理论</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BF%90%E7%BB%B4/">运维</a><span class="category-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签</h3><div class="widget-body"><ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/SpringCloud/" rel="tag">SpringCloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/python-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" rel="tag">python,数据结构</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" rel="tag">数据结构</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%B5%8B%E8%AF%95/" rel="tag">测试</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AF%BE%E5%A4%96%E7%9F%A5%E8%AF%86/" rel="tag">课外知识</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%83%A8%E7%BD%B2/" rel="tag">部署</a><span class="tag-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签云</h3><div class="widget-body tagcloud"><a href="/tags/SpringCloud/" style="font-size:13px">SpringCloud</a> <a href="/tags/python-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size:14px">python,数据结构</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size:13.5px">数据结构</a> <a href="/tags/%E6%B5%8B%E8%AF%95/" style="font-size:13px">测试</a> <a href="/tags/%E7%88%AC%E8%99%AB/" style="font-size:13px">爬虫</a> <a href="/tags/%E8%AF%BE%E5%A4%96%E7%9F%A5%E8%AF%86/" style="font-size:13px">课外知识</a> <a href="/tags/%E9%83%A8%E7%BD%B2/" style="font-size:13px">部署</a></div></div><div class="widget"><h3 class="widget-title">归档</h3><div class="widget-body"><ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/11/">十一月 2020</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/01/">一月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">十二月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">九月 2019</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">八月 2019</a><span class="archive-list-count">2</span></li></ul></div></div><div class="widget"><h3 class="widget-title">最新文章</h3><div class="widget-body"><ul class="recent-post-list list-unstyled no-thumbnail"><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/" class="title">(no title)</a></p><p class="item-date"><time datetime="2020-11-19T02:31:19.165Z" itemprop="datePublished">2020-11-19</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/11/19/%E5%9B%BE%E7%9A%84%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95%E5%AE%9E%E7%8E%B0%EF%BC%88%E6%B1%87%E6%80%BB%EF%BC%89/" class="title">(no title)</a></p><p class="item-date"><time datetime="2020-11-19T02:28:04.862Z" itemprop="datePublished">2020-11-19</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/11/19/%E6%B5%85%E8%B0%88%E5%8C%BA%E5%9D%97%E9%93%BE%E7%9A%84%E5%AF%86%E7%A0%81%E5%AD%A6%E5%8E%9F%E7%90%86_hash%E4%B8%8E%E7%AD%BE%E5%90%8D/" class="title">&#39;浅谈区块链的密码学原理:hash与签名&#39;</a></p><p class="item-date"><time datetime="2020-11-18T18:04:23.000Z" itemprop="datePublished">2020-11-19</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/11/19/hello/" class="title">hello</a></p><p class="item-date"><time datetime="2020-11-18T18:01:09.000Z" itemprop="datePublished">2020-11-19</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/11/19/%E6%AF%8F%E6%97%A5%E4%B8%80%E9%A2%98-%E5%B2%9B%E5%B1%BF%E6%95%B0%E9%87%8F/" class="title">每日一题-岛屿数量</a></p><p class="item-date"><time datetime="2020-11-18T16:23:34.494Z" itemprop="datePublished">2020-11-19</time></p></div></li></ul></div></div></div></aside><main class="main" role="main"><div class="content"><article id="post-React学习总结" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting"><div class="article-header"><div class="article-meta"><span class="article-date"><i class="icon icon-calendar-check"></i> <a href="/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/" class="article-date"><time datetime="2020-11-19T02:31:19.165Z" itemprop="datePublished">2020-11-19</time> </a></span><span class="post-comment"><i class="icon icon-comment"></i> <a href="/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/#comments" class="article-comment-link">评论</a></span></div></div><div class="article-entry marked-body" itemprop="articleBody"><p></p><ul class="markdownIt-TOC"><li><ul><li><a href="#1-%E5%AE%89%E8%A3%85">1、安装</a></li><li><a href="#2-%E5%88%9B%E5%BB%BA">2、创建</a></li><li><a href="#3-%E5%88%9D%E5%A7%8B%E5%8C%96">3、初始化</a></li><li><a href="#4-%E8%BF%90%E8%A1%8C">4、运行</a></li></ul></li><li><a href="#%E7%9F%A5%E8%AF%86%E7%82%B9">知识点：</a><ul><li><a href="#1-%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90">1. 目录结构分析</a></li><li><a href="#2-%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6">2. 创建组件</a></li><li><a href="#3-jsx%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9">3. JSX注意事项</a></li><li><a href="#4%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE%E6%88%96%E5%AF%B9%E8%B1%A1">4.绑定数据或对象</a></li></ul></li><li><a href="#%E7%9F%A5%E8%AF%86%E7%82%B9-2">知识点：</a><ul><li><a href="#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A">事件绑定：</a></li><li><a href="#%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9Aview-model">数据绑定（View-&gt;Model）</a></li><li><a href="#%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9Amodel-view">数据绑定（Model-&gt;View）</a></li><li><a href="#%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9Am-vv-m-%E4%BF%97%E7%A7%B0mvvm">双向数据绑定（M-&gt;V&amp;V-&gt;M 俗称MVVM）</a></li></ul></li><li><a href="#%E7%9F%A5%E8%AF%86%E7%82%B9-3">知识点：</a><ul><li><a href="#1-%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98">1. 跨域问题</a></li><li><a href="#2-axios">2. axios</a></li><li><a href="#%E5%AE%89%E8%A3%85">安装</a></li><li><a href="#%E5%BC%95%E5%85%A5">引入</a></li><li><a href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8">基本使用：</a></li><li><a href="#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E7%9A%84%E4%BD%BF%E7%94%A8">动态路由的使用</a><ul><li><a href="#%E5%AE%9A%E4%B9%89%E8%B7%AF%E7%94%B1">定义路由</a></li><li><a href="#%E4%BD%BF%E7%94%A8%E8%B7%AF%E7%94%B1">使用路由</a></li><li><a href="#%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E8%8E%B7%E5%BE%97%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E7%9A%84%E4%BC%A0%E5%8F%82">在子组件中获得动态路由的传参</a></li></ul></li><li><a href="#%E5%88%A9%E7%94%A8get%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1">利用get实现动态路由</a><ul><li><a href="#%E4%BD%BF%E7%94%A8%E8%B7%AF%E7%94%B1-2">使用路由</a></li><li><a href="#%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E8%8E%B7%E5%BE%97%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E7%9A%84%E4%BC%A0%E5%8F%82-2">在子组件中获得动态路由的传参</a></li></ul></li></ul></li></ul><p></p><h1 id="前言"><a class="markdownIt-Anchor" href="#前言"></a> 前言</h1><p>前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。<br>2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。</p><h1 id="react脚手架建立工程"><a class="markdownIt-Anchor" href="#react脚手架建立工程"></a> react脚手架建立工程</h1><h3 id="1-安装"><a class="markdownIt-Anchor" href="#1-安装"></a> 1、安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install create-react-app -g</span><br></pre></td></tr></table></figure><h3 id="2-创建"><a class="markdownIt-Anchor" href="#2-创建"></a> 2、创建</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">create-react-app react-demo  (react-demo项目名)</span><br></pre></td></tr></table></figure><h3 id="3-初始化"><a class="markdownIt-Anchor" href="#3-初始化"></a> 3、初始化</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd react-demo </span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install  or cnpm install or yarn install</span><br></pre></td></tr></table></figure><h3 id="4-运行"><a class="markdownIt-Anchor" href="#4-运行"></a> 4、运行</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn start</span><br></pre></td></tr></table></figure><h1 id="创建一个helloworld-demo"><a class="markdownIt-Anchor" href="#创建一个helloworld-demo"></a> 创建一个helloWorld Demo</h1><p>引入模块</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;第一步 导入react</span><br><span class="line">import React,&#123;Component&#125; from &#39;react&#39;;</span><br><span class="line">import &#39;..&#x2F;assets&#x2F;css&#x2F;index.css&#39;</span><br><span class="line">import logo from &#39;..&#x2F;assets&#x2F;images&#x2F;logo.svg&#39;;</span><br><span class="line">import &#39;..&#x2F;assets&#x2F;css&#x2F;App.css&#39;;</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;**</span><br><span class="line"> * 绑定原生属性注意：</span><br><span class="line"> * class 要换成className</span><br><span class="line"> * for 要换成htmlFor</span><br><span class="line"> * style 要用&#123;&#125;包裹成对象 </span><br><span class="line"> *&#x2F;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;第二步，编写组件类并继承React.Component</span><br><span class="line">class Home extends Component&#123;</span><br><span class="line">    constructor()&#123;</span><br><span class="line">        super();</span><br><span class="line">        &#x2F;&#x2F;定义数据</span><br><span class="line">        this.state&#x3D;&#123;</span><br><span class="line">            msg:&#39;你好，世界！&#39;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#x2F;&#x2F;第三步，重写render()方法，用于渲染页面</span><br><span class="line">    render()&#123;</span><br><span class="line">        return (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">               &lt;h1&gt;&#123;this.state.msg&#125;&lt;&#x2F;h1&gt;</span><br><span class="line">               &lt;img src&#x3D;&#123;logo&#125; width&#x3D;&#39;500px&#39;&gt;&lt;&#x2F;img&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">            </span><br><span class="line"></span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;第四步，导出该类</span><br><span class="line">export default Home;</span><br></pre></td></tr></table></figure><p>然后启动工程即可完成一个简单的demo</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn start</span><br></pre></td></tr></table></figure><p><img src="https://img-blog.csdnimg.cn/20190730214602873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p><p>react是面向组件的，通过JSX语法来操作虚拟dom节点，如果state的数据发生了变化则会触发对应的dom的刷新。JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合</p><p>注意在本地引用img等资源时，需要通过{xx}对象形式引用。如果是网络图片，直接用url引用即可。</p><p>JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合</p><p>react 通过state来定义和绑定数据，但这种绑定并不是MVVM那种双向数据绑定，在JSX中要使用时通过 <code>this.state.xxx</code>来使用</p><h2 id="知识点"><a class="markdownIt-Anchor" href="#知识点"></a> 知识点：</h2><h3 id="1-目录结构分析"><a class="markdownIt-Anchor" href="#1-目录结构分析"></a> 1. 目录结构分析</h3><p><img src="https://img-blog.csdnimg.cn/20190730220200692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>用脚手架创建的工程的目录是有些不完整的，需要补全（为了方便归档）<br>component文件主要放组件，model放数据模型，App.js是默认的根组件，index.js是入口文件，相当于main，yarn.lock是项目生成的临时文件，package.json是依赖管理文件（类似maven的pom文件），nodel_modules是存放依赖包的文件夹</p><h3 id="2-创建组件"><a class="markdownIt-Anchor" href="#2-创建组件"></a> 2. 创建组件</h3><p>第一步 导入react<br>第二步，编写组件类并继承React.Component<br>第三步，重写render()方法，用于渲染页面<br>第四步，导出该类</p><h3 id="3-jsx注意事项"><a class="markdownIt-Anchor" href="#3-jsx注意事项"></a> 3. JSX注意事项</h3><p>如果要在模板中嵌套多个HTML标签，需要使用一个父元素对其进行包裹</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">   &lt;h1&gt;&#123;this.state.msg&#125;&lt;&#x2F;h1&gt;</span><br><span class="line">   &lt;img src&#x3D;&#123;logo&#125; width&#x3D;&#39;500px&#39;&gt;&lt;&#x2F;img&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure><h3 id="4绑定数据或对象"><a class="markdownIt-Anchor" href="#4绑定数据或对象"></a> 4.绑定数据或对象</h3><p>js中定义对象用{},其实就是restful风格的东东。<br>类似于</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	title:&quot;xxx&quot;,</span><br><span class="line">	content:&quot;xxxx&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>数据的定义用[ ]，一对方括号即可。<br>在react中绑定对象只需要在state中定义即可</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">this.state&#x3D;&#123;</span><br><span class="line">            msg:&#39;你好，世界！&#39;</span><br><span class="line">       &#125;</span><br></pre></td></tr></table></figure><h1 id="事件及数据绑定demo"><a class="markdownIt-Anchor" href="#事件及数据绑定demo"></a> 事件及数据绑定Demo</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line">import React from &#39;react&#39;</span><br><span class="line"></span><br><span class="line">class Demo1 extends React.Component&#123;</span><br><span class="line">    constructor(props)&#123;</span><br><span class="line">        super(props);</span><br><span class="line">        this.state&#x3D;&#123;</span><br><span class="line">            msg:&quot;demo1组件&quot;,</span><br><span class="line">            text:&quot;&quot;,</span><br><span class="line">            keydown:&quot;&quot;,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    run&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">        alert(e.target.getAttribute(&#39;id&#39;)) &#x2F;&#x2F;获取当前执行事件的dom节点</span><br><span class="line">        e.target.style.background&#x3D;&#39;red&#39;;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    inputChange&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">        &#x2F;&#x2F;获取表单的值</span><br><span class="line">        &#x2F;&#x2F;console.log(e.target.value);</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            text: e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    inputChange1&#x3D;()&#x3D;&gt;&#123;</span><br><span class="line">        let value &#x3D; this.refs.input.value;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            text: value</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    getInputValue&#x3D;()&#x3D;&gt;&#123;</span><br><span class="line">        alert(this.state.text)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    inputOnKeydown &#x3D; (e)&#x3D;&gt;&#123;</span><br><span class="line">        console.log(e.keyCode);</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            keydown:e.keyCode</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    inputChange2 &#x3D; (e)&#x3D;&gt;&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            text:e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    changeTextMode &#x3D; (e)&#x3D;&gt;&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            text:&quot;改变后的model值,可以看到下面这个输入框的数据已经改变，而上面两个输入框未发生变化&quot;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render()&#123;</span><br><span class="line">        return (</span><br><span class="line">             &lt;div&gt;   </span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h2&gt;事件对象演示&lt;&#x2F;h2&gt;       </span><br><span class="line">                &#123;this.state.msg&#125;</span><br><span class="line">                &#123;&#x2F;* 事件对象 *&#x2F;&#125;</span><br><span class="line">                &lt;button id&#x3D;&#39;buttonId&#39; onClick&#x3D;&#123;this.run&#125;&gt;事件对象&lt;&#x2F;button&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h2&gt;表单事件演示&lt;&#x2F;h2&gt;       </span><br><span class="line">                &lt;p&gt;&#123;this.state.text&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                &lt;input type&#x3D;&quot;text&quot; onChange&#x3D;&#123;this.inputChange&#125;&#x2F;&gt;</span><br><span class="line">                &lt;button onClick&#x3D;&#123;this.getInputValue&#125;&gt;获取表单值&lt;&#x2F;button&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h2&gt;ref获取dom节点,获得表单值&lt;&#x2F;h2&gt;    </span><br><span class="line">                &lt;p&gt;&#123;this.state.text&#125;&lt;&#x2F;p&gt;   </span><br><span class="line">                &lt;input ref&#x3D;&#39;input&#39; type&#x3D;&quot;text&quot; onChange&#x3D;&#123;this.inputChange1&#125;&#x2F;&gt;</span><br><span class="line">                &lt;button onClick&#x3D;&#123;this.getInputValue&#125;&gt;获取表单值&lt;&#x2F;button&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h2&gt;键盘事件&lt;&#x2F;h2&gt;    </span><br><span class="line">                &lt;p&gt;&#123;this.state.keydown&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                &lt;input type&#x3D;&quot;text&quot; onKeyDown&#x3D;&#123;this.inputOnKeydown&#125;&#x2F;&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h2&gt;react实现双向数据绑定&lt;&#x2F;h2&gt;    </span><br><span class="line">                &lt;p&gt;model改变影响view(通过value属性),view改变影响model&lt;&#x2F;p&gt;</span><br><span class="line">                &lt;p&gt;model值：&#123;this.state.text&#125;&lt;&#x2F;p&gt; </span><br><span class="line">                &lt;input type&#x3D;&#39;text&#39; value&#x3D;&#123;this.state.text&#125; onChange&#x3D;&#123;this.inputChange2&#125;&gt;&lt;&#x2F;input&gt;</span><br><span class="line">                &lt;button onClick&#x3D;&#123;this.changeTextMode&#125;&gt;改变model的值&lt;&#x2F;button&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default Demo1 ;</span><br><span class="line"></span><br></pre></td></tr></table></figure><p><img src="https://img-blog.csdnimg.cn/20190730222041705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p><h2 id="知识点-2"><a class="markdownIt-Anchor" href="#知识点-2"></a> 知识点：</h2><h3 id="事件绑定"><a class="markdownIt-Anchor" href="#事件绑定"></a> 事件绑定：</h3><ol><li>绑定事件需要在对应的事件响应中获得正确的this对象<br>例如：为Button 绑定了一个事件</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button id&#x3D;&#39;buttonId&#39; onClick&#x3D;&#123;this.run&#125;&gt;事件对象&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure><p>如果你用箭头函数写响应方法，则this指向的就是react的当前组件</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">run&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">    alert(e.target.getAttribute(&#39;id&#39;)) &#x2F;&#x2F;获取当前执行事件的dom节点</span><br><span class="line">    e.target.style.background&#x3D;&#39;red&#39;;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果你用的是普通写法写的函数响应</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">funtion run(e)&#123;</span><br><span class="line">    alert(e.target.getAttribute(&#39;id&#39;)) &#x2F;&#x2F;获取当前执行事件的dom节点</span><br><span class="line">    e.target.style.background&#x3D;&#39;red&#39;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>需要使用下面这种写法传递对象指向</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button id&#x3D;&#39;buttonId&#39; onClick&#x3D;&#123;this.run.bind(this)&#125;&gt;事件对象&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure><h3 id="数据绑定view-model"><a class="markdownIt-Anchor" href="#数据绑定view-model"></a> 数据绑定（View-&gt;Model）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;&#123;this.state.text&#125;&lt;&#x2F;p&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;text&quot; onChange&#x3D;&#123;this.inputChange&#125;&#x2F;&gt;</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">inputChange&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">    &#x2F;&#x2F;获取表单的值，设置model的数据</span><br><span class="line">    &#x2F;&#x2F;console.log(e.target.value);</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">        text: e.target.value</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="数据绑定model-view"><a class="markdownIt-Anchor" href="#数据绑定model-view"></a> 数据绑定（Model-&gt;View）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick&#x3D;&#123;this.getInputValue&#125;&gt;获取表单值&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">getInputValue&#x3D;()&#x3D;&gt;&#123;</span><br><span class="line">        alert(this.state.text) &#x2F;&#x2F;获取model中的数据</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><h3 id="双向数据绑定m-vv-m-俗称mvvm"><a class="markdownIt-Anchor" href="#双向数据绑定m-vv-m-俗称mvvm"></a> 双向数据绑定（M-&gt;V&amp;V-&gt;M 俗称MVVM）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2&gt;react实现双向数据绑定&lt;&#x2F;h2&gt;    </span><br><span class="line">&lt;p&gt;model改变影响view(通过value属性),view改变影响model&lt;&#x2F;p&gt;</span><br><span class="line">&lt;p&gt;model值：&#123;this.state.text&#125;&lt;&#x2F;p&gt; </span><br><span class="line">&lt;input type&#x3D;&#39;text&#39; value&#x3D;&#123;this.state.text&#125; onChange&#x3D;&#123;this.inputChange2&#125;&gt;&lt;&#x2F;input&gt;</span><br><span class="line">&lt;button onClick&#x3D;&#123;this.changeTextMode&#125;&gt;改变model的值&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure><p>value 通过属性绑定model 完成 m-&gt;v的绑定<br>通过监听onChange完成v-&gt;m的绑定 ，和上面那个View-&gt;Model的绑定是一样的。</p><h1 id="todolist小练习"><a class="markdownIt-Anchor" href="#todolist小练习"></a> TodoList小练习</h1><p>该练习的旨在熟悉双向数据绑定和react的基础用法，另外扩展了localStorage缓冲处理方案，实现刷新不会丢失数据状态。<br><img src="https://img-blog.csdnimg.cn/201907302232508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line">import React, &#123;Component&#125;from &#39;react&#39;;</span><br><span class="line">import Storage from &#39;..&#x2F;model&#x2F;storage&#39;</span><br><span class="line"></span><br><span class="line">class Demo3 extends Component &#123;</span><br><span class="line">    constructor(props) &#123;</span><br><span class="line">        super(props);</span><br><span class="line">        this.state &#x3D; &#123; </span><br><span class="line">            todo:&#39;&#39;,</span><br><span class="line">            todolist:[],</span><br><span class="line">         &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F;生命周期函数，页面加载触发</span><br><span class="line">    componentDidMount&#x3D;()&#x3D;&gt;&#123;</span><br><span class="line">        let list &#x3D; Storage.get(&#39;todolist&#39;);</span><br><span class="line">        if(list)&#123;</span><br><span class="line">            console.log(&quot;get:&quot;+list)</span><br><span class="line">            this.setState(&#123;</span><br><span class="line">                todolist:list</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    addTodoText&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            todo: e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    onAddBtnClick&#x3D;()&#x3D;&gt;&#123;</span><br><span class="line">        let todolist &#x3D; this.state.todolist;</span><br><span class="line">        </span><br><span class="line">        todolist.push(&#123;</span><br><span class="line">            todo:this.state.todo,</span><br><span class="line">            checked:false</span><br><span class="line">        &#125;)</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            todolist:todolist,</span><br><span class="line">            todo:&quot;&quot;</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F;缓存数据</span><br><span class="line">        Storage.set(&quot;todolist&quot;,todolist);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    onPressEnter&#x3D;(e)&#x3D;&gt;&#123;</span><br><span class="line">        if(e.keyCode&#x3D;&#x3D;13)&#123;</span><br><span class="line">            this.onAddBtnClick();</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    ondelBtnClick&#x3D;(index)&#x3D;&gt;&#123;</span><br><span class="line">        let todolist &#x3D; this.state.todolist;</span><br><span class="line">        todolist.splice(index,1);</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            todolist:todolist</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F;缓存数据</span><br><span class="line">        Storage.set(&quot;todolist&quot;,todolist);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    checkChange &#x3D; (index)&#x3D;&gt;&#123;</span><br><span class="line">        let todolist &#x3D; this.state.todolist;</span><br><span class="line">        todolist[index].checked&#x3D;!todolist[index].checked;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">            todolist:todolist</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F;缓存数据</span><br><span class="line">        Storage.set(&quot;todolist&quot;,todolist);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">        return (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;h2&gt;todoList 演示&lt;&#x2F;h2&gt;</span><br><span class="line">                </span><br><span class="line">                &lt;header&gt;&lt;input type&#x3D;&quot;text&quot; value&#x3D;&#123;this.state.todo&#125; onChange&#x3D;&#123;this.addTodoText&#125; onKeyDown&#x3D;&#123;this.onPressEnter&#125;&#x2F;&gt; &lt;button onClick&#x3D;&#123;this.onAddBtnClick&#125;&gt;增加&lt;&#x2F;button&gt;&lt;&#x2F;header&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h4&gt;未完成事项&lt;&#x2F;h4&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                    &#123;</span><br><span class="line">                        this.state.todolist.map((value,index)&#x3D;&gt;&#123;</span><br><span class="line">                            if(!value.checked)&#123;</span><br><span class="line">                                return (</span><br><span class="line">                                    &lt;div key&#x3D;&#123;index&#125;&gt;</span><br><span class="line">                                        &lt;input type&#x3D;&#39;checkbox&#39; checked&#x3D;&#123;value.checked&#125; onChange&#x3D;&#123;this.checkChange.bind(this,index) &#125;&#x2F;&gt;-----&#123;value.todo&#125; &lt;button onClick&#x3D;&#123;this.ondelBtnClick.bind(this,index)&#125;&gt;删除&lt;&#x2F;button&gt;</span><br><span class="line">                                    &lt;&#x2F;div&gt;</span><br><span class="line">                                )</span><br><span class="line">                            &#125;</span><br><span class="line">                            </span><br><span class="line">                        &#125;)</span><br><span class="line">                    &#125;</span><br><span class="line">                &lt;&#x2F;ul&gt;</span><br><span class="line">                &lt;hr&gt;&lt;&#x2F;hr&gt;</span><br><span class="line">                &lt;h4&gt;已完成事项&lt;&#x2F;h4&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                &#123;</span><br><span class="line">                        this.state.todolist.map((value,index)&#x3D;&gt;&#123;</span><br><span class="line">                            if(value.checked)&#123;</span><br><span class="line">                                return (</span><br><span class="line">                                    &lt;div key&#x3D;&#123;index&#125; className&#x3D;&#39;complete&#39;&gt;</span><br><span class="line">                                        &lt;input type&#x3D;&#39;checkbox&#39; checked&#x3D;&#123;value.checked&#125; onChange&#x3D;&#123;this.checkChange.bind(this,index) &#125;&#x2F;&gt;-----&#123;value.todo&#125; &lt;button onClick&#x3D;&#123;this.ondelBtnClick.bind(this,index)&#125;&gt;删除&lt;&#x2F;button&gt;</span><br><span class="line">                                    &lt;&#x2F;div&gt;</span><br><span class="line">                                )</span><br><span class="line">                            &#125;</span><br><span class="line">                            </span><br><span class="line">                        &#125;)</span><br><span class="line">                    &#125;</span><br><span class="line">                &lt;&#x2F;ul&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default Demo3;</span><br></pre></td></tr></table></figure><br><br><br><h1 id="远程请求数据demo"><a class="markdownIt-Anchor" href="#远程请求数据demo"></a> 远程请求数据Demo</h1><p>通过axios向服务端请求数据，我这里没有通过配置代理解决跨域问题，而是在后端配置了取消CROS请求来解决跨域问题</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">import React from &#39;react&#39;</span><br><span class="line">import axios from &#39;axios&#39;</span><br><span class="line">import request from &#39;..&#x2F;model&#x2F;server&#39;</span><br><span class="line">import jsonp from &#39;fetch-jsonp&#39;</span><br><span class="line"></span><br><span class="line">class Demo4 extends React.Component &#123;</span><br><span class="line">    constructor(props) &#123;</span><br><span class="line">        super(props);</span><br><span class="line">        this.state &#x3D; &#123; </span><br><span class="line">            list:[],</span><br><span class="line">         &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">     getData &#x3D; ()&#x3D;&gt;&#123;</span><br><span class="line">         let api &#x3D; &#39;http:&#x2F;&#x2F;localhost:18080&#x2F;house&#x2F;resources&#x2F;findAll&#39;</span><br><span class="line">        axios.get(api)</span><br><span class="line">        .then((response)&#x3D;&gt;&#123;</span><br><span class="line">            console.log(response)      </span><br><span class="line">            this.setState(&#123;</span><br><span class="line">                list:response.data</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">        .catch((error)&#x3D;&gt;&#123;</span><br><span class="line">            console.log(error)</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F; let data &#x3D;await request.get(api)</span><br><span class="line">        &#x2F;&#x2F; console.log(data)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">        return (</span><br><span class="line">           &lt;div&gt;</span><br><span class="line">               &lt;h2&gt;axios获取服务器数据,未处理跨域，取消cros&lt;&#x2F;h2&gt;</span><br><span class="line">                &lt;button onClick&#x3D;&#123;this.getData&#125;&gt;获取服务器数据&lt;&#x2F;button&gt;</span><br><span class="line">                &lt;p&gt;url:&lt;a href&#x3D;&#39;http:&#x2F;&#x2F;localhost:18080&#x2F;house&#x2F;resources&#x2F;findAll&#39;&gt;http:&#x2F;&#x2F;localhost:18080&#x2F;house&#x2F;resources&#x2F;findAll&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                    &#123;</span><br><span class="line">                        this.state.list.map((value,index)&#x3D;&gt;&#123;</span><br><span class="line">                            return (</span><br><span class="line">                                &lt;li key&#x3D;&#123;index&#125;&gt;&#123;value.created&#125;&lt;&#x2F;li&gt;</span><br><span class="line">                            )</span><br><span class="line">                        &#125;)</span><br><span class="line">                    &#125;</span><br><span class="line">                &lt;&#x2F;ul&gt;</span><br><span class="line">                &lt;h2&gt;jsonp获取服务器数据,跨域请求&lt;&#x2F;h2&gt;</span><br><span class="line">                &lt;p&gt;怎么看，看你的地址加入callback&#x3D;xxx之后是否能访问就知道是否支持jsonp了&lt;&#x2F;p&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">           &lt;&#x2F;div&gt; </span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default Demo4;</span><br></pre></td></tr></table></figure><p><img src="https://img-blog.csdnimg.cn/20190730230508379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE1NDYzNg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p><h2 id="知识点-3"><a class="markdownIt-Anchor" href="#知识点-3"></a> 知识点：</h2><h3 id="1-跨域问题"><a class="markdownIt-Anchor" href="#1-跨域问题"></a> 1. 跨域问题</h3><p>所谓跨域问题就是 协议，域名，端口三者有其一不一致则出现跨域，一般情况下跨域是不被浏览器支持的。</p><h3 id="2-axios"><a class="markdownIt-Anchor" href="#2-axios"></a> 2. axios</h3><p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。<br>使用</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save axios</span><br></pre></td></tr></table></figure><h1 id="react-router-4x基本配置及动态路由使用"><a class="markdownIt-Anchor" href="#react-router-4x基本配置及动态路由使用"></a> React-router 4.x基本配置及动态路由使用</h1><h3 id="安装"><a class="markdownIt-Anchor" href="#安装"></a> 安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install react-router-dom --save</span><br></pre></td></tr></table></figure><h3 id="引入"><a class="markdownIt-Anchor" href="#引入"></a> 引入</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import &#123;BrowserRouter as Router,Route,Link&#125; from &#39;react-router-dom&#39;</span><br></pre></td></tr></table></figure><h3 id="基本使用"><a class="markdownIt-Anchor" href="#基本使用"></a> 基本使用：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;Router&gt;</span><br><span class="line">         &lt;div&gt;</span><br><span class="line">                  &lt;header className&#x3D;&#39;header&#39;&gt;</span><br><span class="line">                          &lt;Link to&#x3D;&quot;&#x2F;&quot;&gt;首页&lt;&#x2F;Link&gt;&lt;br&#x2F;&gt;</span><br><span class="line">                          &lt;Link to&#x3D;&quot;&#x2F;news&quot;&gt;新闻&lt;&#x2F;Link&gt;</span><br><span class="line">                  &lt;&#x2F;header&gt;</span><br><span class="line">         &lt;&#x2F;div&gt;</span><br><span class="line">               &lt;hr&#x2F;&gt;</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">                &lt;Route exact path&#x3D;&quot;&#x2F;&quot; component&#x3D;&#123;Home&#125; &#x2F;&gt;</span><br><span class="line">                &lt;Route path&#x3D;&#39;&#x2F;news&#39; component&#x3D;&#123;News&#125;&#x2F;&gt;</span><br><span class="line">                &lt;Route path&#x3D;&#39;&#x2F;content&#x2F;:aid&#39; component&#x3D;&#123;Content&#125;&#x2F;&gt;</span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;Router&gt;</span><br></pre></td></tr></table></figure><p><img src="https://img-blog.csdnimg.cn/20190730225043213.png" alt="router"><br><br></p><hr><p></p><p><img src="https://img-blog.csdnimg.cn/20190730225319224.png" alt="在这里插入图片描述"></p><h3 id="动态路由的使用"><a class="markdownIt-Anchor" href="#动态路由的使用"></a> 动态路由的使用</h3><h4 id="定义路由"><a class="markdownIt-Anchor" href="#定义路由"></a> 定义路由</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Route path&#x3D;&#39;&#x2F;content&#x2F;:aid&#39; component&#x3D;&#123;Content&#125;&#x2F;&gt;</span><br></pre></td></tr></table></figure><h4 id="使用路由"><a class="markdownIt-Anchor" href="#使用路由"></a> 使用路由</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">       this.state.list1.map((value,key)&#x3D;&gt;&#123;</span><br><span class="line">              return (</span><br><span class="line">              &#x2F;&#x2F;ES6模板字符串写法</span><br><span class="line">              &lt;Link to&#x3D;&#123;&#96;&#x2F;content&#x2F;$&#123;value.aid&#125;?content&#x3D;$&#123;value.content&#125;&#96;&#125; key&#x3D;&#123;key&#125;&gt;</span><br><span class="line">              &lt;li&gt;&#123;value.title&#125;&lt;&#x2F;li&gt;</span><br><span class="line">              &lt;&#x2F;Link&gt;</span><br><span class="line">                        )</span><br><span class="line">         &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h4 id="在子组件中获得动态路由的传参"><a class="markdownIt-Anchor" href="#在子组件中获得动态路由的传参"></a> 在子组件中获得动态路由的传参</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">aid:this.props.match.params.aid,</span><br></pre></td></tr></table></figure><p>在prps.match.params中获取传参即可</p><h3 id="利用get实现动态路由"><a class="markdownIt-Anchor" href="#利用get实现动态路由"></a> 利用get实现动态路由</h3><p>无需定义路由格式，直接使用，在路由后面像get方法一样传参<br>类似&quot;?name=zhong&quot;这种</p><h4 id="使用路由-2"><a class="markdownIt-Anchor" href="#使用路由-2"></a> 使用路由</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Link to&#x3D;&#123;&#96;&#x2F;content&#x2F;$&#123;value.aid&#125;?content&#x3D;$&#123;value.content&#125;&#96;&#125; key&#x3D;&#123;key&#125;&gt;&lt;li&gt;&#123;value.title&#125;&lt;&#x2F;li&gt;&lt;&#x2F;Link&gt;</span><br></pre></td></tr></table></figure><p>其中<br><strong>?content=${value.content}</strong> 就是使用了get传参</p><h4 id="在子组件中获得动态路由的传参-2"><a class="markdownIt-Anchor" href="#在子组件中获得动态路由的传参-2"></a> 在子组件中获得动态路由的传参</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">componentDidMount()&#123;</span><br><span class="line">    &#x2F;&#x2F;通过npm带的url模块解析get参数 cnpm install url --save 安装即可</span><br><span class="line">    console.log(url.parse(this.props.location.search,true))</span><br><span class="line">    let news &#x3D; &#123;</span><br><span class="line">        aid:this.props.match.params.aid, &#x2F;&#x2F;通过动态路由传值</span><br><span class="line">        content:url.parse(this.props.location.search,true).query.content, &#x2F;&#x2F;通过get传值</span><br><span class="line">    &#125;</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">        news:news</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://img-blog.csdnimg.cn/20190730230439418.png" alt="在这里插入图片描述"></p></div><div class="article-footer"><blockquote class="mt-2x"><ul class="post-copyright list-unstyled"><li class="post-copyright-link hidden-xs"><strong>本文链接：</strong> <a href="http://xiaozhong233.gitee.io/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/" target="_blank" rel="external">http://xiaozhong233.gitee.io/2020/11/19/React%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！</li></ul></blockquote><div class="panel panel-default panel-badger"><div class="panel-body"><figure class="media"><div class="media-left"><a href="https://github.com/XiaoZhong233" target="_blank" class="img-burn thumb-sm visible-lg"><img src="/images/avatar.jpg" class="img-rounded w-full" alt=""></a></div><div class="media-body"><h3 class="media-heading"><a href="https://github.com/XiaoZhong233" target="_blank"><span class="text-dark">钟</span><small class="ml-1x">苦逼学生仔 &amp; 未来搬砖大师</small></a></h3><div>个人简介。</div></div></figure></div></div></div></article><section id="comments"></section></div><nav class="bar bar-footer clearfix" data-stick-bottom><div class="bar-inner"><ul class="pager pull-left"><li class="next"><a href="/2020/11/19/%E5%9B%BE%E7%9A%84%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95%E5%AE%9E%E7%8E%B0%EF%BC%88%E6%B1%87%E6%80%BB%EF%BC%89/" title="(no title)"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a></li></ul><div class="bar-right"><div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div></div></div></nav></main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter"><ul class="social-links"><li><a href="https://github.com/XiaoZhong233" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top"><i class="icon icon-rss"></i></a></li></ul><div class="copyright"><div class="publishby">Theme by <a href="https://github.com/cofess" target="_blank">cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.</div></div></footer><script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script>window.jQuery||document.write('<script src="js/jquery.min.js"><\/script>')</script><script src="/js/plugin.min.js"></script><script src="/js/application.js"></script><script>window.INSIGHT_CONFIG={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(未命名)"},ROOT_URL:"/",CONTENT_URL:"/content.json"}</script><script src="/js/insight.js"></script><script src="//cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js"></script><script>var gitment=new Gitment({id:"",owner:"XiaoZhong233",repo:"blog_comments",oauth:{client_id:"872c8be0e1b0dc0dc59b",client_secret:"9850234f5d5a83d14eecb2fdc74ab4bc8d624287"}});gitment.render("comments")</script></body></html>